<template>
    <view id="bind-account">
        <view class="phone" v-if="type=='phone'">
            <!-- <view class="form" >
            	<view class="form-title">原手机号</view>
            	<input class="uni-input"  name="oldPhone"  maxlength="11" v-model="oldPhone" placeholder="请输入原手机号" />
                <view class="form-action" ></view>
            </view> -->
            <view class="form">
            	<view class="form-title">新手机号</view>
            	<input class="uni-input"  name="newPhone"  maxlength="11" v-model="newPhone" placeholder="请输入新手机号" />
                <view class="form-action" ></view>
            </view>
            <view class="form">
            	<view class="form-title">验证码</view>
            	<input class="uni-input"  name="code"  maxlength="6" v-model="code" placeholder="请输入验证码" />
                <view class="form-action" ><button class="sendBtn" @click="sendCode" type="info" :disabled="codeBtn.disabled" size="mini">{{codeBtn.text}}</button></view>
            </view>
            <button type="primary" @click="submitFun" class="btn phone-sub">提交</button>
        </view>
        <view class="yun" v-else>
            <view class="form" >
            	<view class="form-title">云比赛账号</view>
            	<input class="uni-input"  name="username"  maxlength="20" v-model="username" placeholder="请输入云比赛账号" />
                <view class="form-action" ></view>
            </view>
            <view class="form">
            	<view class="form-title">密码</view>
                <input class="uni-input" placeholder="请输入密码" maxlength="30" v-model="pwd" :password="showPassword" />
            	<!-- <input class="uni-input" type="password" name="pwd"  maxlength="20" :value="pwd" placeholder="请输入密码" /> -->
                <view class="form-action with-fun" @click="showPassword=!showPassword"><view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" ></view></view>
            </view>
            <!-- <view class="tip">还没有云比赛机构账号？ <navigator class="navbtn" url="/pages/home/personalSettings/registered">点此注册</navigator></view> -->
            <navigator hover-class="none" url="/pages/home/personalSettings/registered" class="tip">还没有云比赛机构账号？ <text class="navbtn" >点此注册</text></navigator>
            <button type="primary" @click="submitFun"  class="btn">绑定</button>
        </view>
    </view>
</template>
<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import { bindPhone, bindYun, sendMessage } from '@/common/api.js'
    import validate from '@/common/ys-validate.js'

    export default {
        components: {
            uniIcons
        },
        data() {
            return {
                oldPhone: "",
                newPhone: '',
                code:'',
                type:'',
                username:'',
                pwd:'',
                showPassword:true,
                codeBtn:{
                    color:'primary',
                    disabled:false,
                    text:'发送验证码'
                }
            }
        },
        methods: {
            sendCode(){
                if(this.newPhone){
                    if(!validate.isPhone(this.newPhone)){
                        uni.showToast({
                            icon: 'none',
                            title: '请输入正确的手机号'
                        })
                        return;
                    }
                    let time=60;
                    this.codeBtn.disabled=true;
                    this.codeBtn.text=`重新发送(${time})`;
                    const timer = setInterval(()=>{
                        this.codeBtn.text=`重新发送(${time--})`;
                        if(time<0){
                            this.codeBtn.disabled=false;
                            this.codeBtn.text='发送验证码'
                            clearInterval(timer)
                        }
                    },1000)
                    sendMessage({mobi:this.newPhone,type:'189'}).then((res)=>{
                        const data = res.data;
                        if(data.errcode==0){
                            uni.showToast({
                                icon: 'none',
                                title: '发送成功'
                            })
                        }else{
                            uni.showToast({
                                icon: 'none',
                                title: data.msg
                            })
                        }
                    })
                }else{
                    uni.showToast({
                        icon: 'none',
                        title: '请先输入手机号'
                    })
                }
            },
            submitFun(){
                if(this.type=='phone'){
                    if(!validate.isPhone(this.newPhone)){
                        uni.showToast({
                            icon: 'none',
                            title: '请输入正确的手机号'
                        })
                        return;
                    }
                    if(!this.code){
                        uni.showToast({
                            icon: 'none',
                            title: '请输入验证码'
                        })
                        return;
                    }
                    bindPhone({
                        newcode:this.code,
                        newphone:this.newPhone
                    }).then((res)=>{
                        const data = res.data
                        if(data.errcode==0){
                            uni.showModal({
                                title: '提示',
                                content: '手机绑定成功',
                                success: function (res) {
                                    if (res.confirm) {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                        // uni.reLaunch({
                                        //     url: '/pages/home/personalSettings/personalSettings'
                                        // });
                                    } else if (res.cancel) {

                                    }
                                }
                            });
                        }else if(data.errcode==1000 || data.errcode==1001){
                            uni.removeStorageSync('token');
                            uni.reLaunch({
                            	url:'/pages/home/welcome'
                            })
                        }else{
                            uni.showToast({
                            	position: 'center',
                            	icon: 'none',
                            	title:data.msg
                            });
                        }
                    })
                }else{
                    if(!validate.isPwd(this.pwd)){
                        uni.showToast({
                            icon: 'none',
                            title: '密码须是6～20位字符'
                        })
                        return;
                    }
                    if(!validate.isEmail(this.username)){
                        uni.showToast({
                            icon: 'none',
                            title: '请输入正确邮箱号'
                        })
                        return;
                    }
                    bindYun({
                        name:this.username,
                        pwd:this.pwd
                    }).then((res)=>{
                        const data = res.data
                        if(data.errcode==0){
                            uni.showModal({
                                title: '提示',
                                content: '账号绑定成功',
                                success: function (res) {
                                    if (res.confirm) {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    } else if (res.cancel) {

                                    }
                                }
                            });
                        }else if(data.errcode==1000 || data.errcode==1001){
                            uni.removeStorageSync('token');
                            uni.reLaunch({
                            	url:'/pages/home/welcome'
                            })
                        }else{
                            uni.showToast({
                            	position: 'center',
                            	icon: 'none',
                            	title:data.msg
                            });
                        }
                    })
                }
            }
        },
        onLoad(options) {
            this.type = options.type;
            uni.setNavigationBarTitle({
                title: options.type=='phone'?'绑定手机号':'绑定云比赛账号'
            });
        }
    }
</script>

<style lang="scss">
    page{
        padding-top: 30rpx;
    }
    #bind-account {
        position: relative;
        .btn{
            font-size: 30rpx;
            margin: 20rpx;
            margin-top: 20rpx;
            border-radius: 50rpx;
            color: #fff;
            background: #1A66FF;
        }
        .phone-sub{
            margin-top: 60rpx;
        }
        .form{
            display: flex;
            // flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            background: #fff;
            .form-title{
                padding: 20rpx;
                padding-left: 30rpx;
                width: 150rpx;
            }
            .form-action{
                padding: 10rpx 30rpx;
                display: flex;
                .sendBtn{
                    color: #000;
                }
            }
            .input-disabled{
                color: #bbb;
            }
        }
        .tip{
            padding: 30rpx;
            padding-top: 20rpx;
            font-size: 24rpx;
            .navbtn{
                display: inline-block;
                color: #007aff;
            }
        }
        .with-fun{
            .uni-icon{
                width: 80rpx;
                height: 80rpx;
                line-height: 80rpx;
                flex-shrink: 0;
                color: #999;
            }
        }
    }
</style>
